import { initMixin } from "./init";
import { lifecycleMixin } from "./lifecycle";
import { renderMixin } from "./vnode/index";
import { initGlobalApi } from "./global-api/index";
import { stateMixin } from "./initState";

import { compileToFunction } from "./compile/index";
import { createEl } from "./vnode/patch";
import { patch } from "./vnode/patch";

function Vue(options) {
  this._init(options);
}
initMixin(Vue); // 初始化状态
lifecycleMixin(Vue); // 初始化生命周期
renderMixin(Vue); // 初始化渲染函数

initGlobalApi(Vue); // 全局方法：Vue.mixin、Vue.component、Vue.extend
stateMixin(Vue); // 给Vue的原型上添加一个$nextTick和$watch方法

// 测试diff
// let vm1 = new Vue({ data: { name: '张三' } });
// let render1 = compileToFunction(`<ul>
//   <li style="background-color: red;" key="b">b</li>
//   <li style="background-color: lime;" key="c">c</li>
//   <li style="background-color: pink;" key="d">d</li>
// </ul>`);
// let vNode1 = render1.call(vm1);
// document.body && document.body.appendChild(createEl(vNode1));

// let vm2 = new Vue({ data: { name: '李四' } });
// let render2 = compileToFunction(`<ul>
// <li style="background-color: gold;" key="a">a</li>
// <li style="background-color: red;" key="b">b</li>
// <li style="background-color: lime;" key="c">c</li>
// <li style="background-color: pink;" key="d">d</li>
// </ul>`);
// let vNode2 = render2.call(vm2);

// patch比对
// setTimeout(() => {
//   patch(vNode1, vNode2);
// }, 1000)

export default Vue;